#services {
  font-family: PingFang-SC-Medium;

  .banner {
    margin-top: 1.26rem;
    width: 100%;
    height: 3.2rem;
    background-size: 100% 100%;
    background-image: url("../../assets/images/services/service-1@2x.jpg");
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
      background-image: url("../../assets/images/services/service-1@3x.jpg");
    }
    font-size: 0.48rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    p:nth-of-type(1) {
      padding-top: 0.67rem;
    }
    div{
      width: 0.7rem;
      height: 0.04rem;
      background-color: white;
      margin-top: 0.14rem;
      margin-left: 3.4rem;
    }
  }
  .list {
    margin: 0.3rem 0.34rem 0.3rem 0.39rem;
    .title {
      position: absolute;
      z-index: 100;
      width: 100%;
      height: 100;
      p:nth-of-type(1) {
        padding-top: 1.2rem;
        font-size: 0.36rem;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 0.5rem;
      }
      p:nth-of-type(2) {
        font-size: 0.18rem;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 0.25rem;
      }
    }
    .mark {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
    }
    .item-1 {
      position: relative;
      margin-bottom: 0.14rem;
      width: 6.77rem;
      height: 3.4rem;
      background-size: 100% 100%;
      background-image: url("../../assets/images/services/service-2@2x.jpg");
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url("../../assets/images/services/service-2@3x.jpg");
      }
    }
    .item-2 {
      position: relative;
      margin-bottom: 0.14rem;
      width: 6.77rem;
      height: 3.4rem;
      background-size: 100% 100%;
      background-image: url("../../assets/images/services/service-3@2x.jpg");
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url("../../assets/images/services/service-3@3x.jpg");
      }
    }
    .item-3 {
      position: relative;
      margin-bottom: 0.14rem;
      width: 6.77rem;
      height: 3.4rem;
      background-size: 100% 100%;
      background-image: url("../../assets/images/services/service-4@2x.jpg");
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url("../../assets/images/services/service-4@3x.jpg");
      }
    }
    .item-4 {
      position: relative;
      width: 6.77rem;
      margin-bottom: 0.14rem;
      height: 3.4rem;
      background-size: 100% 100%;
      background-image: url("../../assets/images/services/service-5@2x.jpg");
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url("../../assets/images/services/service-5@3x.jpg");
      }
    }
    .item-5 {
      position: relative;
      margin-bottom: 0.14rem;
      width: 6.77rem;
      height: 3.4rem;
      background-size: 100% 100%;
      background-image: url("../../assets/images/services/service-6@2x.jpg");
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url("../../assets/images/services/service-6@3x.jpg");
      }
    }
    .item-6 {
      position: relative;
      width: 6.77rem;
      height: 3.4rem;
      background-size: 100% 100%;
      background-image: url("../../assets/images/services/service-7@2x.jpg");
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url("../../assets/images/services/service-7@3x.jpg");
      }
    }
  }
}
